<!-- 购物车 -->
<template>
    <div class="orderDom flex flex-c">
      <div class="head-title"><i class="el-icon-shopping-cart-full" style="margin-right: 5px;font-size: 20px;"></i> 购物车</div>
      <!-- <div style="font-size: 18px; color: #000; padding-bottom: 10px;"> 此订单需由贵部业务机关部门审核并函提XXXXXXXXXX</div> -->
      <div class="flex-1" style="padding: 20px;">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
          <el-table-column prop="type" label="数据类型" width="130"> 
            <template slot-scope="scope">
              {{ scope.row.type == 1 ? "气象数据" : "" }}
              {{ scope.row.type == 2 ? " 测绘数据" : "" }}
            </template>
          </el-table-column>
          <el-table-column prop="filename" label="数据名称" width="160"> </el-table-column>
          <el-table-column  prop="scope" label="订阅范围">
            <!-- <template slot-scope="scope">
                <div v-if="scope.row.scope.length > 40">
                  <el-tooltip effect="dark" placement="top-end"  >
                    <div slot="content">
                        <div v-for="(item, index) in scope.row.scope.split(',')" :key="index">{{ item }}</div>
                    </div>
                    <div style="width: 400px; text-overflow: ellipsis;  white-space: nowrap; overflow: hidden;">{{ scope.row.scope }}</div>
                  </el-tooltip>
                </div>
                <div v-else>
                  {{ scope.row.scope }}
                </div>
            </template> -->
            <template slot-scope="scope">
              <template v-if="scope.row.scope.length > 40">
                <div v-for="(item, index) in scope.row.scope.split(',')" :key="index">{{ item }}</div>
              </template>
              <div v-else>{{ scope.row.scope }}</div>
            </template>
          </el-table-column>
          <el-table-column  prop="datatype" label="订阅方式" width="130">
             <template slot-scope="scope">
              {{ scope.row.datatype == 2 ? "指挥专网" : "" }}
              {{ scope.row.datatype == 1 ? "军综网" : "" }}
            </template>
          </el-table-column>
          <!-- <el-table-column  label="服务地址">
            <template slot-scope="scope">
                <div v-if="scope.row.datatype == 1">
                    <div>ip端口: {{ scope.row.ipaddr }}:{{ scope.row.protno }}</div>
                    <div>用户名: {{ scope.row.account }}</div>
                    <div>密码: {{ scope.row.password }}</div>
                    <div>路径: {{ scope.row.url }}</div>
                </div>
                <div v-if="scope.row.datatype == 2">
                    <div>服务地址: {{ scope.row.lmsa }}</div>
                    <div>路径: {{ scope.row.lmasurl }}</div>
                </div>
            </template>
          </el-table-column> -->
          <el-table-column prop="endtime" label="订阅时间" width="150">
            <template slot-scope="scope">
                <div v-if="scope.row.timetype == 2">
                  <div>{{scope.row.startime }}</div>
                  <div>{{scope.row.endtime}}</div>
                </div>
                <div v-else> 长期 </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="onSettlement(scope.row)"> 编辑订阅 </el-button>
              <el-button type="text" size="small" @click="onlistDelete(scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="text-align: end;padding: 20px;">
        <el-button type="warning" @click="onSearch"  :loading="saveLoading">一键提交</el-button>
      </div>

      <el-dialog title="编辑订阅" :visible.sync="dialogSettlement" width="1400px" :append-to-body="true" :before-close="handleClose" :closeOnClickModal="false">
        <div class="data-edit">
            <mapData ref="mapDataRef1" v-if="dialogSettlement" mapId="mapId3"></mapData>
        </div>
        <div style="text-align: center;">
          <el-button @click="dialogSettlement = false">取 消</el-button>
          <el-button type="primary" @click="saveShoppingCart">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import wizMap from "@/components/wizMap/wizMap.vue";
  import mapData from "@/components/mapData.vue";
  
  export default {
    components: { wizMap, mapData },
    data() {
      return {
        tableLoading: false,
        total: 0,
        userid: sessionStorage.getItem('userid'),
        isadmin: sessionStorage.getItem('isadmin'), // 1 超级管理员 2 普通管理员
        formInline: {
          pageNum: 1,
          pageSize: 10,
          userid: ''
        },
        wizMapData:{
            mapView: [[105, 36], 3],
            isShowPane: true,
            paneType: false,
            showtype: 1, //1 不带测绘  2测绘数据
            // jwdfw: [
            //   [140, 0],
            //   [70, 0],
            //   [70, 60],
            //   [140, 60],
            // ],
            bakView: '',
        },
        tableData: [],
        saveLoading: false,
        dialogSettlement: false,
        iframeStatus: true,
        dataViewShowType: 1,
        customizedParams: {
          datatype: "1",
          range: "地图选择", 
          scope: "", // 范围
          // type: 1, //1气象数据 2测绘数据
          timetype: 1,
          isexamine: 1, //1未审核 2审核通过 3审核拒绝
          dataViewName: "",
          jsonDate: {
            dataView: "", // 表头数据
            mapPosition: "", // 地图数据
            订阅数据时间: ["长期"],
            // 定制范围: [],
            // 订阅时次: [],
            // 时效: [],
            // 要素列表: [],
            // 站点选择: [],
            // L1通道选择: [],
            // L2产品选择: [],
            // 卫星选择: [],
            // 地面要素: [],
            // 高空层次: [],
            // 高空要素: [],
            // 标志列表: [],
            // 质控码列表: [],
            // 静止卫星: [],
            // 极轨卫星: [],
            // 其他卫星: [],
            // 观测时间: [],
            // 参数选择: [],
            // 预报层次: [],
            // 预报时效: [],
            // 时次选择: [],
          },
          fileid: "",
          datelong: "",
          account: "user",
          password: "user",
          protno: "21",
          url: "/data",
          ipaddr: "21.17.240.181",
          filename: "",
          startime: "",
          endtime: "",
          crearetime: "",
          lmsa: "",
          lmasurl: "",
        },
        partListSteps: [],
        addLmasurl: '',
        lmasurlStatus: false,
        yaosuValue: [],
        optionsList: [
          { label: "/RecvData/fub", value: "/RecvData/fub" },
          { label: "/RecvData/htb", value: "/RecvData/htb" },
          { label: "/RecvData/grib", value: "/RecvData/grib" },
          { label: "/RecvData/hyz", value: "/RecvData/hyz" },
          { label: "/RecvData/kj", value: "/RecvData/kj" },
          { label: "/RecvData/kjsk", value: "/RecvData/kjsk" },
          { label: "/RecvData/ldsw", value: "/RecvData/ldsw" },
          { label: "新建目录", value: "add" },
        ],
      };
    },
    created() {
      this.userid = sessionStorage.getItem("userid");
      this.isadmin = sessionStorage.getItem("isadmin");
    //   console.log(this.isadmin);
      this.oninitData()
    },
    methods: {
      oninitData(){
        this.tableLoading = true;
        this.formInline.userid = this.userid
        this.$http.post(`/fileSubscribe/list`, this.formInline).then((res) => {
            this.tableLoading = false;
            if (res.code == 200) {
                this.tableData = res.data.records || [];
                // this.tableData.forEach(item => {
                //   item.jsonDate = JSON.parse(item.jsonDate)
                // })
                this.total = res.data.total || 0;
            } else {
                this.$message.error(res.message);
            }
          }).catch((err) => {
              this.tableLoading = false;
              this.$message.error(err.message);
          });

        // this.tableData = require('@/assets/json/gouwulist.json');
      },
      // 编辑订阅
      onSettlement(row){
        // this.dataPartList(row)
        this.dialogSettlement = true;
        let customizedParams = {...row}
        customizedParams.jsonDate = JSON.parse(row.jsonDate)
        customizedParams.datatype = row.datatype + ''
        customizedParams.showType = customizedParams.jsonDate.showType
        console.log(customizedParams, '编辑订阅========================1');
        // this.dataViewShowType = row.type

        // 渲染地图
        setTimeout(() => {
          // 判断是否已加载完成
          let fn = new Promise((reject, resolve) => {
            this.$refs.mapDataRef1.dataPartList(customizedParams.fileid, reject)
          })
          fn.then(res => {
              this.$refs.mapDataRef1.myHeadName = customizedParams.jsonDate.dataViewName
              // this.$refs.mapDataRef.customizedParams.showType = this.dataViewShowType
              this.$refs.mapDataRef1.customizedParams = JSON.parse(JSON.stringify(customizedParams))
              // setTimeout(() => {
              this.$refs.mapDataRef1.dataEdit(JSON.parse(JSON.stringify(customizedParams)))
              console.log(customizedParams, '=======编辑订阅2');
              // },0)
          })
          // this.$refs.mapDataRef1.dataViewShowType = customizedParams.showtype || '1'
          // this.wizMapData = {
          //   mapView: [[105, 36], 3],
          //   isShowPane: true,
          //   // dataView: this.dataView,
          //   paneType: false,
          //   showtype: row.type, //1 不带测绘  2测绘数据
          //   // jwdfw: [
          //   //   [140, 0],
          //   //   [70, 0],
          //   //   [70, 60],
          //   //   [140, 60],
          //   // ],
          //   bakView: this.customizedParams.jsonDate.mapPosition,
          // }
          // this.$refs.wizmapMe3.mapData =  this.wizMapData

        },100)
      
      },
      qxChange(val, item) {
        if (val) {
          this.customizedParams.jsonDate[item] = this.partListSteps[item].map(item => item.name);
        } else {
          this.customizedParams.jsonDate[item] = [];
        }
      },
      handleClose(){
        this.dialogSettlement = false;
      },
      // 保存订阅
      saveShoppingCart(){
        let data = this.$refs.mapDataRef1.dataSave() || {}
        console.log(data, 'data==========');
        
        if (data.hasOwnProperty('mapData') && data.hasOwnProperty('dataView')){
            let dataView = data.dataView
            console.log(dataView, '保存订阅');
            dataView.jsonDate = JSON.stringify(dataView.jsonDate)
            this.$http.post(`/fileSubscribe/update`, dataView).then((res) => {
                if (res.code == 200) {
                    this.$message.success("保存成功");
                    this.oninitData()
                    this.handleClose()
                } else {
                    this.$message.error(res.message);
                }
            }).catch((err) => {
                this.$message.error(err.message);
            });
        }
    
      },
      // 地图回显
      handlerMapChane(data) {
        console.log(data, 'map');
        // if (this.iframeStatus) {
        //   return;
        // }

        this.customizedParams.jsonDate["mapPosition"] = {
          // ...this.mapDataParmas,
          ...data.mapData,
        };
        this.customizedParams.showType = this.dataViewShowType
        // 战区赋值
        if (data.mapData.hasOwnProperty("selectList")) {
          let scope  = [...new Set(data.mapData.selectList)]
          this.customizedParams.scope = scope.join('，') || '' // 战区 范围
        }
        if (this.dataViewShowType == 2){
          let scope  = [...new Set(data.mapData.tableData.map(item => item.area2))]
          this.customizedParams.scope = scope.join(',')
        }
       
        if (data.hasOwnProperty("close")) {
          // this.iframeStatus = true
          this.iframeClick(true);
        }
      },
      onlistDelete(row){
        this.$confirm('确定删除该条数据吗?', '提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post(`/fileSubscribe/delete?id=${row.id}`).then((res) => {
              if (res.code == 200) {
                  this.$message.success("删除成功");
                  this.$store.commit("setBadgeNum");
                  this.oninitData()
              } else {
                  this.$message.error(res.message);
              }
          }).catch((err) => {
              this.tableLoading = false;
              this.$message.error(err.message);
          });
        }).catch(err => {});
      },
      iframeClick() {
        this.iframeStatus = !this.iframeStatus;
        // if (this.iframeStatus) {
        //   var obj = {
        //     mapView: [[105, 36], 3],
        //     isShowPane: true,
        //     paneType: false,
        //     showtype: this.dataViewShowType, //1 不带测绘  2测绘数据
        //   };
        // } else {
        //   var obj = {
        //     mapView: [[105, 36], 4],
        //     isShowPane: false,
        //     // dataView: this.dataView,
        //     paneType: 1,
        //     showtype: this.dataViewShowType, //1 不带测绘  2测绘数据
        //     jwdfw: [
        //       [140, 0],
        //       [70, 0],
        //       [70, 60],
        //       [140, 60],
        //     ],
        //     bakView: '',
        //   };
        // }
        // this.mapDataParams = obj
        this.$refs.wizmapMe3.mapData = this.wizMapData;
      },
      // 一件结算
        onSearch(){
          this.saveLoading = true
            this.$http.post(`/fileSubscribe/all/update?userid=${this.userid}`).then((res) => {
              this.saveLoading = false;
              if (res.code == 200) {
                    this.$message.success("结算成功");
                    // this.oninitData()
                    this.$store.commit('setDialogInfo', false)
                    this.$store.commit('setBadgeNum', 0)
                    this.$router.push(`/dataManagement`)
                    this.$store.commit('SetMenu', {menuname: '我的订阅', url: `/dataManagement`})
                } else {
                    this.$message.error(res.message);
                }
            }).catch((err) => {
                this.saveLoading = false;
                this.$message.error(err.message);
            });
        },
        leCurrentChange(page) {
            this.formInline.pageNum = page;
            this.onSearch();
        },
        handleSizeChange(size) {
            this.formInline.pageSize = size;
            this.onSearch();
        },


        fileListInifRadioChange() {
          if (this.customizedParams.timetype == 1) {
            this.customizedParams.startime = "";
            this.customizedParams.endtime = "";
          }
        },
        timeChange(val, item, index) {
          this.customizedParams.jsonDate["订阅数据时间"][0] = `${this.customizedParams.startime} - ${this.customizedParams.endtime}`;
        },
        lmasurlChange(path) {
          // console.log(path, "pathChange");
          if (path == "add") {
            this.lmasurlStatus = true;
            this.customizedParams.lmasurl = "";
          } else {
            this.lmasurlStatus = false;
          }
          // this.fileListInif.iframeData = path
        },
        addLmasurlClick() {
            this.customizedParams.lmasurl = this.addLmasurl;
            this.optionsList.splice(this.optionsList.length - 1, 0, { label: this.addLmasurl, value: this.addLmasurl });
            this.lmasurlStatus = false;
            this.addLmasurl = "";
        },
        // 获取元素数据
        dataPartList(row) {
          this.$http.post(`/fileList/part/list?id=${row.fileid}`).then((res) => {
              if (res.code == 200) {
                let data = res.data || [];
                // console.log(data, 'data');
                let list = {};
                data.forEach((item) => {
                  Object.keys(item).forEach((elitem) => {
                    if (elitem == row.jsonDate.dataViewName) {
                      list = item[elitem];
                    }
                  });
                });
                console.log(list, 'list');
                this.partListSteps = list;
                
                // this.stepsList = [...row];
                // this.stepsName = row[0];
              } else this.$message.error(res.message);
            })
            .catch((err) => {
              this.$message.error(err.message);
            });
          // console.log(this.myHeadName, 'dataPartList');
          
          // this.partListSteps = require("@/assets/json/datalist.json").yaosulist
          // let row = [];
          // this.prolist
          // this.partListSteps.forEach((item) => {
          //     Object.keys(item).forEach((elitem) => {
          //         if (elitem == this.myHeadName) {
          //             Object.keys(item[elitem]).forEach((rowItem) => {
          //               row.push(rowItem);
          //             });

          //         }
          //     });
          // });
          // this.stepsList = [...row];

        },
        // 复选框事件
        // checkboxChange(val,row){
        //   if (val){
        //     this.yaosuValue.push(row.value)
        //   } else {
        //     this.yaosuValue.splice(this.yaosuValue.indexOf(row.value), 1)
        //   }
        // }
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .orderDom {
    height: 100%;
    background-color: #fff;
  }
  .head-title{
      background: url("@/assets/images/pTitle.png") no-repeat;
      background-size: 100% 100%;
      padding: 20px 20px 10px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
  }
  .map {
    width: 350px;
    height: 300px;
    position: relative;
    .full-screen {
      position: absolute;
      bottom: 10px;
      right: 10px;
      font-size: 12px;
      z-index: 9;
      background-color: #e7e7e7;
      padding: 5px 10px;
      color: #377ffd;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .site-list {
      width: auto;
      padding: 10px;
      margin-bottom: 3px;
      background-color: #f3f8fc;
    }
  }
  .iframeFalse {
    width: 350px;
    height: 300px;
  }
  .iframeTrue {
    margin: 0;
    padding: 13px;
    border: 0;
    position: fixed;
    top: 5vh;
    left: 10vw;
    width: 80vw;
    height: calc(100vh - 80px);
    z-index: 1000;
    background-color: #fff;
    background: url("~@/assets/images/tanchudi.png") no-repeat;
    background-size: 100% 100%;
  }
  ::v-deep .el-dialog__body{
    padding: 10px 20px 20px 20px;
  }
  ::v-deep .el-dialog__header{
    background: url("@/assets/images/pTitle.png") no-repeat;
    background-size: 100% 100%;
  }
  ::v-deep .el-dialog__header{
      padding: 13px 20px 10px;
  }
  .data-edit{

    .title{
      width: 100%;
      color: #333333;
      font-size: 14px;
      background: #FBFCFF;
      border: 1px solid #F6F6F6;
      padding: 3px 8px 3px 15px;
      position: relative;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      &::after{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background-color: #FF9D02;
      }
    }
    .map-box{
      width: 100%;
      height: 300px;
      position: relative;
      .full-screen{
        position: absolute;
        bottom: 10px;
        right: 10px;
        font-size: 12px;
        z-index: 9;
        background-color: #e7e7e7;
        padding: 5px 10px;
        color: #377ffd;
        display: flex;
        align-items: center;
        cursor: pointer;
      }
    }
  }
  </style>
  